<template>
    <div class="itemMusicTop">
        <img :src="playlist.coverImgUrl" alt="" class="bgimg">
        <div class="itemLeft">
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <span>歌单</span>
        </div>
        <div class="itemRight">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao7"></use>
            </svg>
        </div>
    </div>
    <div class="itemMusicContent">
        <div class="itemContentLeft">
            <img :src="playlist.coverImgUrl" alt="">
            <span class="playCount">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
                {{ changeCount(playlist.playCount) }}
            </span>
        </div>
        <div class="itemContentRight">
            <div class="itemContentRight-top">
                <span>{{ playlist.name }}</span>
            </div>
            <div class="itemContentRight-center">
                <img :src="playlist.creator.backgroundUrl" alt="">
                <span>{{ playlist.creator.nickname }}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou1-copy"></use>
                </svg>
            </div>
            <p>
                <span>{{ playlist.description }}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou1-copy"></use>
                </svg>
            </p>
        </div>
    </div>
    <div class="itemMusicList">
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiaoxi31-copy"></use>
            </svg>
            <span>{{ playlist.commentCount }}</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenxiang31-copy-copy"></use>
            </svg>
            <span>{{ playlist.shareCount }}</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-download"></use>
            </svg>
            <span>下载</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-show_duoxuan-copy"></use>
            </svg>
            <span>多选</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HtmlItemMusicTop',

    setup(props) {
        // console.log(props);
        // 通过props进行传值，判断如果数据拿不到，就获取sessionStorage中的
        if ((props.playlist.creator = '')) {
            props.playlist.creator = JSON.parse(sessionStorage.getItem().playlist).creator
        }
        // 对播放量的处理
        function changeCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + '亿'
            } else if (num >= 10000) {
                return (num / 10000).toFixed(1) + '万'
            }
        }
        return { changeCount }
    },
    props: ['playlist'],
};
</script>

<style lang="less" scoped>
.itemMusicTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .itemLeft,
    .itemRight {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 .2rem;

        span {
            font-size: .4rem;
            color: #fff;
        }

        .icon {
            fill: #fff; //填充颜色
        }
    }

    .bgimg {
        width: 100%;
        height: 11rem;
        position: fixed;
        z-index: -1;
        filter: blur(.6rem);
    }
}

.itemMusicContent {
    width: 100%;
    height: 3.3rem;
    display: flex;

    .itemContentLeft {
        position: relative;

        img {
            width: 3.2rem;
            height: 3.2rem;
            border-radius: .4rem;
            padding: .2rem;
        }

        .playCount {
            position: absolute;
            top: .3rem;
            right: .3rem;
            color: #fff;

            .icon {
                width: .32rem;
                height: .32rem;
                margin-right: -0.08rem;
            }
        }
    }

    .itemContentRight {
        margin: .2rem .2rem 0 .2rem;
        color: #fff;

        .icon {
            width: .3rem;
            height: .3rem;
        }

        .itemContentRight-center {
            padding: .2rem .2rem .2rem 0;
            display: flex;
            align-items: center;
            color: #aca9a9;

            img {
                width: .7rem;
                height: .7rem;
                border-radius: 50%;
                margin-right: .1rem;
            }
        }

        p {
            position: relative;
            display: flex;
            color: #aca9a9;
            font-size: .24rem;

            span {
                display: block;
                width: 3.4rem;
                height: .9rem;
                overflow: hidden;
            }

            .icon {
                position: absolute;
                top: .32rem;
                right: .16rem;
            }
        }
    }
}

.itemMusicList {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1;

    .iconItem {
        flex: 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;

        .icon {
            width: .6rem;
            height: .6rem;
            padding-bottom: .08rem;
            fill: #fff;
        }
    }
}
</style>